<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>北京科技报</title>
    <link href="css/play.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/public.css" rel="stylesheet" />
    <link href="css/header.css" rel="stylesheet" />
    <link href="css/bookstarp.css" rel="stylesheet">
    <link href="css/swiper.css" rel="stylesheet">
    <script src="js/swiper.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/hls.js"></script>
    <script src="js/DPlayer.js"></script>
</head>

<body onload="init()">
    <div class="header_box" id="header_vue">
        <div class="header flex justify-between align-end">
            <div class="flex justify-start align-end">
                <img class="logo" src="images/logoff.png" />
                <div class="color-ff sub_title">聚焦科学传播 弘扬科学精神</div>
            </div>
            <div class="flex justify-end align-end header_right">
                <div class="search_box">
                    <input class="search_input" type="text" placeholder="请输入关键字搜索" />
                    <img class="search_icon" src="images/home/search_icon.png" />
                </div>
                <div class="app_box">
                    <img style="height: 36px;" src="images/home/app_icon.png" />
                    <div class="font-12 color-ff margin-top-10" style="height: 20px;">APP下载</div>
                    <div class="app-container">
                        <div class="app-img-box">
                            <img class="app-img" :src="qrCode" alt="QR Code">
                            <img class="app-logo" src="images/home/app_icon.png" alt="Logo">
                        </div>
                        <div class="text-center margin-top-8 font-13">扫码分享当前页面</div>
                    </div>
                </div>
                <div class="jz_box">
                    <img style="height: 36px;" src="images/home/jz_icon.png" />
                    <div class="font-12 color-ff margin-top-10" style="height: 20px;">融媒矩阵</div>
                    <div class="jz-container">
                        <ul>
                            <li class="flex justify-start align-center jz-li">
                                <img class="jz-li-img" src="images/header/zh.png" alt="">
                                <div class="margin-left-14 font-16 text-left jz-li-text">北京科技报知乎</div>
                            </li>
                            <li class="flex justify-start align-center jz-li">
                                <img class="jz-li-img" src="images/header/wx.png" alt="">
                                <div class="margin-left-14 font-16 text-left jz-li-text">北京科技报微信</div>
                            </li>
                            <li class="flex justify-start align-center jz-li">
                                <img class="jz-li-img" src="images/header/tt.png" alt="">
                                <div class="margin-left-14 font-16 text-left jz-li-text">北京科技报头条</div>
                            </li>
                            <li class="flex justify-start align-center jz-li">
                                <img class="jz-li-img" src="images/header/dy.png" alt="">
                                <div class="margin-left-14 font-16 text-left jz-li-text">北京科技报抖音</div>
                            </li>
                            <li class="flex justify-start align-center jz-li">
                                <img class="jz-li-img" src="images/header/wb.png" alt="">
                                <div class="margin-left-14 font-16 text-left jz-li-text">北京科技报微博</div>
                            </li>
                        </ul>
                        <div class="jz-img-box">
                            <img class="jz-img" :src="qrCode" alt="QR Code">
                            <img class="jz-logo" src="images/home/app_icon.png" alt="Logo">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header_slider_box">
            <div class="flex justify-between header_slider">
                <div v-for="(item,index) in sliderList" v-bind:key="index">
                    <div v-if="!item.expand" class="slider_item">
                        <a :class="item.sort == 1? 'active': ''" href="">{{ item.title }}</a>
                        <div v-if="item.sort == 1" class="slider_line"></div>
                    </div>
                    <div v-else class="slider_item" v-on:click.stop="handleExpandSubSlider(item.sort)">
                        <a class="flex align-center">
                            <div>{{ item.title }}</div>
                            <img class="slider_item_expand"
                                v-bind:class="{'slider_item_retract':page_number == item.sort}" src="images/down.png" />
                        </a>
                        <div class="sub_slider_box" :class="page_number == item.sort? 'disBlock': ''">
                            <div v-for="(sub,num) in item.subSlider" v-bind:key="num" class="sub_slider"><a href="">{{
                                    sub.title }}</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="play_container">
        <div id="playPage" class="playPage flex justify-between">
            <div class="page_left">
                <!-- 左侧 -->
                <!-- 导航部分 -->
                <div class="route_path">
                    <div class="route_path_name color-ff">
                        <span>当前位置：</span>
                        <span>首页</span>
                        <span>＞</span>
                        <span class="color-main">回放</span>
                    </div>
                    <div class="flex align-center">
                        <div class="header-xian flex-one"></div>
                        <div class="header-radius"></div>
                    </div>
                </div>
                <!-- 视频部分 -->
                <div class="margin-top-20 ls_video">
                    <div id="dplayer"></div>
                    <!-- <video width="100%" height="448" controls style="object-fit: fill">
            <source src="./images/liveStreaming/movie.mp4" type="application/x-mpegURL" />
            <source src="./images/liveStreaming/movie.mp4" type="video/mp4" />
            您的浏览器不支持视频标签。
          </video> -->
                    <!-- <div class="play_message">
                        <div class="play_message_text">
                            距离直播开始 XX天 23:48:07
                        </div>
                        <div class="play_message_text">
                            直播已结束 感谢观看
                        </div>
                    </div> -->
                </div>
                <!-- 内容部分 -->
                <div class="ls_content">
                    <div class="color-ff font-28 ls_header_title">
                        <!-- 内容标题 -->
                        中国发展高层论坛2024年年会：向世界发出“高水平开放”信号
                    </div>
                    <div class="flex ls_content_detail">
                        <!-- 内容信息 -->
                        <span class="ls_content_detail_time">2024/05/01 18:28:38</span>
                        <span class="ls_content_detail_souce">来源：科普中央厨房</span>
                        <span class="ls_content_detail_view">观看量：21.23w</span>
                    </div>
                    <div class="color-ff font-18 ls_content_text">
                        <!-- 内容文本 -->
                        <p>
                            全球首座风渔融合浮式平台——国家能源集团龙源电力“国能共享号”投产，在浮式海上风电领域开创了“水下养鱼、水上发电”的海洋经济开发应用新场景，为深远海绿色能源立体化开发、海洋资源集约利用提供技术储备。
                        </p>
                        <p>
                            该项目位于福建莆田南日岛国家级海洋牧场示范区，采用三立柱半潜式平台，平台上安装一台4兆瓦海上风电机组，平台中间取正六边形作为养殖区域，养殖水体约10000立方米。投产后，“国能共享号”4兆瓦风电机组满功率运行一天可发电9.6万千瓦时，能满足约4.2万人一天的生活用电需求；一个养殖周期的鱼品收入可达到数百万元，实现新能源发展与传统海洋经济互促共赢。
                        </p>
                    </div>
                    <div id="swiper-ad-container" class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img class="banner_ad_img" src="images/home/banner-1-1.jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img class="banner_ad_img" src="images/home/banner-1-1.jpg" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page_right">
                <div id="swiper-poster-container" class="swiper-container swiper-poster-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in posterList" :key="item.id">
                            <img class="banner_poster_img" :src="item.imgUrl" />
                        </div>
                    </div>

                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>

                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
                <div class="poster_base">
                    <span class="text_ellipsis">{{posterList[swiperactiveIndex]?.title}}</span>
                    <div class="triangle_left"></div>
                    <div class="triangle_right"></div>
                </div>
                <div class="page_right_bottom">
                    <!-- 下部分 -->
                    <div class="detail_model_header" style="margin-top: 40px">
                        <div class="flex justify-between align-center">
                            <div class="font-22 detail_model_header_left color-main">相关回放</div>
                            <div class="flex justify-end align-center detail_model_header_right">
                            </div>
                        </div>
                        <div class="flex align-center">
                            <div class="header-xian flex-one"></div>
                            <div class="header-radius"></div>
                        </div>
                    </div>
                    <div class="flex justify-between flex-wrap page_right_bottom_playback">
                        <div class="video_box" style="width: 48%;">
                            <img class="img_box video_img" src="images/live/play1.jpg" alt="">
                            <div class="color-ff text_ellipsis_2 video_content">提问科学家：争做辟谣小卫前多吃碳水化合物可...
                            </div>
                            <img class="video_play_img" src="images/live/play.png" alt="">
                        </div>
                        <div class="video_box" style="width: 48%;">
                            <img class="img_box video_img" src="images/live/play1.jpg" alt="">
                            <div class="color-ff text_ellipsis_2 video_content">提问科学家：争做辟谣小卫前多吃碳水化合物可...
                            </div>
                            <img class="video_play_img" src="images/live/play.png" alt="">
                        </div>
                    </div>
                    <div id="swiper-bottom-container"
                        class="margin-top-30 margin-bottom-30 swiper-container swiper-bottom-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img class="banner_bottom_img" src="images/special/banner-1-2.jpg" />
                            </div>
                            <div class="swiper-slide">
                                <img class="banner_bottom_img" src="images/special/banner-1-2.jpg" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <iframe style="width: 100%; height: 237px; border: none; overflow: hidden" src="footer.html"
        frameborder="0"></iframe>
</body>

</html>
<script src="js/header.js"></script>
<script src="js/play.js"></script>
